<template>
    <l-layout class="l-tab-page" v-if="!lr_loadPage" >
        
        <l-panel title="设备信息">
            <template #toolLeft>
                 <l-query2 :items="queryItems" :formData="queryData" :loading="tableLoading" @search="handleSearch">
                    <template #f_Type>
                        <l-select 
                        placeholder="请选择" 
                       :options="lr_dataItem['DeviceType']"
                        labelKey="f_ItemName"
                        valueKey="f_ItemValue"
                        v-model="queryData.f_Type" 
                        />
                    </template>
                    <template #f_State>
                        <l-select 
                        placeholder="请选择" 
                        :options="StateOptions" 
                        v-model="queryData.f_State" 
                        labelKey="label"
                        valueKey="value"
                        />
                    </template>
                    <template #keyword >
                        <el-input v-model="queryData.keyword" :placeholder="$t('请输入关键字')" />
                    </template>
                </l-query2>
            </template>

            <template #toolRight>
                <l-tool-btns @setting="lr_handleSettingTable" @click="handleAdd()" >
                   <l-excel-btns></l-excel-btns>
                   <!-- <el-button-group v-if="lr_hasPageAuth('ExportExcel','buttons')">
                        <el-button size="mini" icon="el-icon-download"
                            @click="handleDownLoad"
                        >导出</el-button>
                    </el-button-group> -->
                </l-tool-btns>
            </template>              
            <l-table 
                ref="mainTable" 
                :loading="tableLoading" 
                :columns="lr_getPageColumns(columns)" 
                :dataSource="tableData"
                :isPage="true"
                :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage"
                @loadPageData="turnTablePage"
                rowKey="f_Id"
                isMultiSelect
                @selectionChange="selectChange"
                >
                <template v-for="(col,index) in lr_tableColumnsByToLabel(lr_getPageColumns(columns))" v-slot:[col.prop]="scope" >
                    <l-value-to-label
                    :value="scope.row[col.prop]"
                    :type="col.dataType"
                    :code="col.dataCode"
                    :valueKey="col.valueKey"
                    :labelKey="col.labelKey"
                    :options="col.options"
                    :format="col.format"
                    :setting="col.setting"
                    :key="index" ></l-value-to-label>
                </template>

                <template v-slot:f_State="scope" >
                    <p v-if="scope.row.f_State==0"  style="color:#67C23A">正常</p>
                    <p v-else-if="scope.row.f_State==1" style="color:#F56C6C">异常</p>
                </template>
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>

        <!--表单-->
        <l-dialog :title="$t(formTitle)"
                  :visible.sync="formVisible"
                  :height="535"
                  :width="532"
                  @ok="handleSave"
                  @close="handleCloseForm"
                  @opened="handleOpenedForm">
            <my-form ref="form" :isReadOnly="formDetails" ></my-form>
        </l-dialog>

        <!-- 查看 -->
        <l-dialog :title="$t(viewFormTitle)"     
                  :visible.sync='viewFormVisible'
                  :height="641"
                  :width="1000"
                  :hasBtns="false"
                >
              <myViewForm  :sonRow="viewFormRow" v-if="viewFormVisible"></myViewForm>
        </l-dialog>


    </l-layout>
</template>

<script>
    import MyForm from './form'                             // "新增/编辑"表单
    import myViewForm from './viewForm'                     // "查看" 表单

    const api = window.$api.erpcase.deviceinfo              // 设备管理的接口
    export default {
        components: {
            MyForm,
            myViewForm
        },
        data() {
            return {
                lr_isPage: true,
                moduleCode: 'ERP_DeviceInfo',

                // 查询参数
                queryData:{
                    f_Type:'',
                    f_State:'',
                    keyword:'',
                },
                queryItems:[
                    {label:'设备类型',prop:'f_Type'},
                    {label:'设备状态',prop:'f_State'},
                    {label:'关键字',prop:'keyword'},
                ],
               
                StateOptions:[
                    {"value":"0","label":"正常"},
                    {"value":"1","label":"异常"},
                ],
                
                // 表格参数
                tableLoading: false,
                tableData:[],
                tableTotal:0,
                tableCurrentPage:1,
                tablePageSize:50,
                columns: [
                    {label:'设备编号',prop:'f_Number',minWidth:120,align:'left',dataType:'input',},
                    {label:'设备名称',prop:'f_Name',minWidth:150,align:'left',dataType:'input',isNotAutoWrap:true},
                    {label:'设备类型',prop:'f_Type',minWidth:100,align:'left',dataType:'mydata',options:[{"value":"压铸设备","label":"压铸设备"},{"value":"机压设备","label":"机压设备"},]},
                    {label:'供应商',prop:'f_Supplier',minWidth:200,align:'left',dataType:'dataSource',dataCode:'ERP_Suppliers',valueKey:'f_id',labelKey:'f_name',isNotAutoWrap:true},
                    {label:'设备位置',prop:'f_Address',minWidth:160,align:'left',dataType:'input'},
                    {label:'规格型号',prop:'f_Model',minWidth:130,align:'left',dataType:'input',isNotAutoWrap:true},
                    {label:'负责人',prop:'f_Principal',minWidth:80,align:'left',dataType:'user'},
                    {label:'设备状态',prop:'f_State',minWidth:80,align:'left',dataType:'input'},
                    {label:'操作时间',prop:'f_CreateDate',minWidth:120,align:'left',dataType:'datetime',format:'yyyy-MM-dd HH:mm:ss',isNotAutoWrap:true},
                ],
                tableBtns:[
                    {prop:'View',label:'查看'},
                    {prop:'Edit',label:'编辑'},
                    {prop:'Delete',label:'删除'},  
                ],

                // 表单参数
                formVisible:false,
                formTitle:'设备信息',
                formEditRow:null,
                formEdit: false,
                formDetails: false,

                // 查看表单参数
                viewFormVisible:false,
                viewFormRow:null,
                viewFormTitle:'查看设备详情',


                SupplierOptions:[],  // 供应商的数据源 
                
                tableSelection:[]     // 表中的数据
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            async init() {
                await this.systemDATAItem()
                this.loadTableData()
            },

            handleSearch(){
                this.loadTableData()
            },
            turnTablePage({rows}){
                this.tablePageSize = rows
                this.loadTableData(true)
            },
            async loadTableData(isNotFirst){
                if(!isNotFirst){
                    this.tableCurrentPage = 1
                }
                this.tableLoading = true
                let queryData = this.$deepClone(this.queryData)
                
                queryData.rows = this.tablePageSize
                queryData.page = this.tableCurrentPage
                queryData.sidx = 'F_CreateDate DESC'
                let data = await this.$awaitWraper(api.getPage(queryData))
                if(data != null){
                    this.tableData = data.rows
                    this.tableTotal = data.records
                }
                else{
                    this.tableData = []
                }
                this.tableLoading = false
            },

             selectChange(val){
                this.tableSelection=val
             },
             //设备信息导出
             handleDownLoad(){
                let Data={}
                const selectedData = this.$refs.mainTable.getSelected()
                if(selectedData.length == 0){
                     this.$message({
                        type: 'warning',
                        message: `请选择数据！`
                    })    
                    return
                }
                const ids =String(selectedData.map(t=>t.f_Id))
                Data.ids=ids
                this.lr_downFile('erpCase/deviceinfos/export','设备信息列表',Data)
             },

            // 数据字典
            systemDATAItem(){
                this.lr_loadDataItem("DeviceType")              // 设备类型
                this.lr_loadDataItem("deviceState");            // 设备状态 
            },

            handleAdd(){
                this.formEdit = false
                this.formDetails = false
                this.handleShowForm('新增设备')
            },
            handleEdit($index,row){
                this.formEdit = true
                this.formDetails = false
                this.formEditRow = row
                this.handleShowForm('编辑设备')
            },
            handleDelete($index,row){
                this.$confirm(this.$t('此操作将永久删除该数据, 是否继续?'), this.$t('提示'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
                }).then(async () => {
                    this.tableData.splice($index,1);
                    this.tableTotal--
                    await api.remove(row.f_Id)
                    this.$message({
                        type: 'success',
                        message: this.$t('删除成功!')
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: this.$t('已取消删除!')
                    })
                })
            },
          

            async handleSave(showLoading, hideLoading) {
                showLoading('保存数据中...')
                if (await this.$refs.form.validateForm()) {
                    const res = await this.$refs.form.saveForm({ keyValue: this.formEdit? this.formEditRow.f_Id :'', isEdit: this.formEdit })
                    if (res) {
                        const msg = this.formEdit ? '更新成功!' : '新增成功!'
                        this.$message({
                            type: 'success',
                            message: this.$t(msg)
                        })
                        this.loadTableData()
                        this.formVisible = false
                    }
                }
                hideLoading()
            },

            handleShowForm(text) {
                this.formTitle = text
                this.formVisible = true
            },
            async handleOpenedForm(showLoading, hideLoading) {
                if (this.formEdit) {
                    showLoading('加载数据中...')
                    await this.$refs.form.loadFormData({ keyValue: this.formEditRow.f_Id })
                    hideLoading()
                }
            },
            handleCloseForm() {
                this.$refs.form.resetForm()
            },

            handleView($index,row){
                this.viewFormRow=row
                this. viewFormVisible=true
            }

        }
    }
</script>
